<template>
   <div class="all">
     
      

      <!-- 侧边栏 -->
      <el-aside width="200px" style="background-color: #304156">
        <!-- default-openeds属性指默认打开的栏目 -->
        <el-menu :default-openeds="[]" >
          <el-submenu index="1" class="navigation">
            <template slot="title" 
              ><i class="el-icon-message"></i>Statistics</template
            >
            <el-menu-item-group>
              <el-menu-item index="1-1" @click= "index1">Statistics</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2" class="navigation">
            <template slot="title"
              ><i class="el-icon-menu"></i>Subject</template
            >
            <el-menu-item-group>
              <el-menu-item index="2-1" @click= "index2">Enter</el-menu-item>
              <el-menu-item index="2-2" @click= "index3">Modify</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3" class="navigation">
            <template slot="title"
              ><i class="el-icon-setting"></i>Student</template
            >
            <el-menu-item-group>
              <el-menu-item index="3-1" @click= "index4">Score Entry</el-menu-item>
              <el-menu-item index="3-2" @click= "index5">Modify</el-menu-item>
              <el-menu-item index="3-3" @click= "index6">Enter Student</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--  -->

      <!-- 侧边栏组件 -->
      <!-- <sidebarUi></sidebarUi> -->

      <!-- top标签栏 -->
      <el-tabs type="border-card" class="demo-tabs">
         <el-tab-pane v-model="dianji">
            <template #label>
               <span class="custom-tabs-label" >
               <el-icon><calendar /></el-icon>
               <span >Statistics</span>
               </span>
            </template>
            Route
         </el-tab-pane>
         <el-tab-pane label="Enter" v-model="dianji" ref="currentName">Enter</el-tab-pane>
         <el-tab-pane label="Subject Modify" v-model="dianji">Modify</el-tab-pane>
         <el-tab-pane label="Score Entry" v-model="dianji">Score Entry</el-tab-pane>
         <el-tab-pane label="Student Modify" v-model="dianji">Student Modify</el-tab-pane>
         <el-tab-pane label="Enter Student" v-model="dianji">Enter Student</el-tab-pane>
      </el-tabs> 
      <!--  -->

      <!-- 手写top栏 -->
      <!-- 
      <div class="demo-tabs el-tabs el-tabs--top el-tabs--border-card">
    <div class="el-tabs__header is-top">
        <div class="el-tabs__nav-wrap is-top">
            <div class="el-tabs__nav-scroll">
                <div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(0px);">
                    <div id="tab-0" aria-controls="pane-0" role="tab" aria-selected="true" tabindex="0" class="el-tabs__item is-top is-active">Statistics</div>
                    <div id="tab-1" aria-controls="pane-1" role="tab" tabindex="-1" class="el-tabs__item is-top">Enter</div>          
                    <div id="tab-2" aria-controls="pane-2" role="tab" tabindex="-1" class="el-tabs__item is-top">Subject Modify</div>
                    <div id="tab-3" aria-controls="pane-3" role="tab" tabindex="-1" class="el-tabs__item is-top">Score Entry</div>
                    <div id="tab-4" aria-controls="pane-4" role="tab" tabindex="-1" class="el-tabs__item is-top">Student Modify</div>
                    <div id="tab-5" aria-controls="pane-5" role="tab" tabindex="-1" class="el-tabs__item is-top">Enter Student</div>
                </div>
            </div>
        </div>
    </div>
    <div class="el-tabs__content">
        <div role="tabpanel" id="pane-0" aria-labelledby="tab-0" class="el-tab-pane" value="1" style="">
         Route
      </div> 
        <div role="tabpanel" aria-hidden="false" id="pane-1" aria-labelledby="tab-1" class="el-tab-pane" value="1" style="display: none;">Enter</div>
        <div role="tabpanel" aria-hidden="true" id="pane-2" aria-labelledby="tab-2" class="el-tab-pane" value="1" style="display: none;">Modify</div> 
        <div role="tabpanel" aria-hidden="true" id="pane-3" aria-labelledby="tab-3" class="el-tab-pane" value="1" style="display: none;">Score Entry</div> 
        <div role="tabpanel" aria-hidden="true" id="pane-4" aria-labelledby="tab-4" class="el-tab-pane" value="1" style="display: none;">Student Modify</div> 
        <div role="tabpanel" aria-hidden="true" id="pane-5" aria-labelledby="tab-5" class="el-tab-pane" value="1" style="display: none;">Enter Student</div>
    </div>

   </div>
 -->
   </div>
</template>
<script>
// import sidebarUi from '../components/sidebarUi/sidebarUi.vue';
export default {
   name: 'asd',
   components: {
   //  sidebarUi
   },
   mixins: [],
   props: {
     
   },
   data() {
     return {
       dianji:1
     }
   },
   computed: {
      
   },
   watch: {
     
   },
   mounted() {
     
   },
   methods: {
      index1(){
         this.$root.currentName = "0"
         console.log(this.$root.currentName)
         // console.log($vm._data.currentName)
         // console.log(this.$router)
        
      },
      index2(){
         console.log(this.$root.currentName)
         this.$root.currentName = "1"
         
         // $vm._data.currentName = "1"
      },
      index3(){
         this.dianji = 3
         $vm._data.currentName = "2"
      },
      index4(){
         this.dianji = 4
         $vm._data.currentName = "3" 
      },
      index5(){
         this.dianji = 5
         $vm._data.currentName = "4"
      },
      index6(){
         this.dianji = 6
         $vm._data.currentName = "5"
      }
      
   }
};
</script>

<style>
.demo-tabs > .el-tabs__content {
   padding: 32px;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
 }
 .demo-tabs .custom-tabs-label .el-icon {
   vertical-align: middle;
 }
 .demo-tabs .custom-tabs-label span {
   vertical-align: middle;
   margin-left: 4px;
 }
.el-tabs--border-card {
   width: 100%;
   padding-top:105px;
}
 /* all */
.all {
   display: flex;
}

/* 侧边栏 */
.el-aside{
     padding-top: 140px;
 }
 .el-menu-item-group {
   background-color: #2d3a4b;
 }
 .navigation {
   background-color: #304156;
   color: #fff;
 }
 .el-submenu .el-menu-item {
   color: #fff;
   font-family: "PMZD";
 }
 .el-submenu__title {
   color: #fff;
   font-family: "PMZD";
 }
 .all {
     display: flex;
     height: 820px;
 }
 

 /* 手写css */
 /* 
 .el-tabs--border-card {
    width: 100%;
    padding-top: 105px;
}
.el-tabs--border-card {
    background: #FFF;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}

div {
    display: block;
}

.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
}
.el-tabs__nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
}
.el-tabs__nav-next, .el-tabs__nav-prev {
    position: absolute;
    cursor: pointer;
    line-height: 44px;
    font-size: 12px;
    color: #909399;
}
.el-tabs__nav-next, .el-tabs__nav-prev {
    position: absolute;
    cursor: pointer;
    line-height: 44px;
    font-size: 12px;
    color: #909399;
}
.el-tabs__nav-scroll {
    overflow: hidden;
}
.el-tabs__nav {
    white-space: nowrap;
    position: relative;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    float: left;
    z-index: 2;
}
.el-col-offset-0, .el-tabs--border-card>.el-tabs__header .is-scrollable .el-tabs__item:first-child {
    margin-left: 0;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    color: #409EFF;
    background-color: #FFF;
    border-right-color: #DCDFE6;
    border-left-color: #DCDFE6;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item, .el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child {
    margin-left: -1px;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item {
    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    border: 1px solid transparent;
    margin-top: -1px;
    color: #909399;
}
.el-tabs__item.is-active {
    color: #409EFF;
}
.el-tabs__item {
    padding: 0 20px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
}
.el-tabs__content {
    overflow: hidden;
    position: relative;
}

element.style {
}
.el-tabs--border-card {
    width: 100%;
    padding-top: 105px;
}
.el-tabs--border-card {
    background: #FFF;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
 */
</style> 


 